<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">商品信息管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 600px;">
						<div style="float: left;">
							<select id="selectId" class="form-control pull-right"
								style="height: 30px;">

							</select>
						</div>
						<div style="float: left;">
							<input type="text" name="table_search" id="searchNameId"
								style="height: 30px;" class="form-control pull-right"
								placeholder="请输入商品名" />
						</div>
						<div class="input-group-btn" style="float: left;">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-manager">类目管理</button>
							<button type="button" class="btn btn-default btn-add">商品添加</button>
							<button type="button" class="btn btn-default btn-delete">商品删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-pmanagering">
				<table class="table table-hover">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll">全选</th>
							<th>商品名称</th>
							<th>所属分类</th>
							<th>商品单价</th>
							<th>商品状态</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>修改状态</th>
							<th>修改信息</th>
						</tr>
					</thead>
					<tbody id="tbodyId"></tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix"></div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">

   // 页面加载完成后执行 
   $(document).ready(function(){
	   // 1. 加载类目下拉选框 
	   doGetCategory();
	   // 2. 异步加载页面信息 
	   $("#pageId").load("doPageUI",function(){
		   doGetObjects();
	   });
	   // 3.类目下拉选框发生变化事假件 
	   $("#selectId").change(doChangeGoodsType);
	   // 4. 类目管理,商品查询,添加,删除 点击事件  
	   $(".input-group-btn")
	   .on("click",".btn-search",doQueryObjects)
	   .on("click",".btn-delete",doDeleteObjects)
	   .on("click",".btn-manager,.btn-add",doLoadEditUI);
	 /*   .on("click",".btn-save",doSaveOrUpdate); */
	   // 5. 上下架按钮点击事件 
	   $("tbody").on("click",".btn-valid",doValidById); 
	   // 6. 全选按钮事件注册
	   $("#checkAll").change(doChangeTbodyCheckBoxState);
	   // 7. 在tbody对象上注册change事件 ,当tbody中.cBox对应的对象状态变化时执行事件处理
	   $("#tbodyId").on("change", ".cBox", doChangeTHeadCheckBoxState);
	   // 8.注册修改点击事件
	   $("#tbodyId").on("click", ".btn-update", doLoadUpdateUI); 
   });
   
   // 1.1 发送获取商品类目异步请求 
   function doGetCategory(){
	   url="goods/doLoadCategoryName";
	   $.post(url,function(result){
		   if(result.status==1){
			   // 1.2
			   doLoadCategoryName(result.data);
		   } else {
			   alert(result.message);
		   }
	   });
   }
   // 1.2 根据返回的数据创建对应的下拉选框 
   function doLoadCategoryName(category){
	   $("#selectId").append("<option value='全部商品'>全部商品</option>");
	   for(var i=0;i<category.length;i++){
		   var name = category[i].categoryName;
		   var id = category[i].id;
		   $("#selectId").append("<option id='"+id+"' value='"+name+"'>"+name+"</option>");
	   }
   }
   
   // 2.1 发送获取页面数据的异步请求
   function doGetObjects(){
	   var url="goods/doFindPageObjects";
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   if(!pageCurrent)pageCurrent=1;
	   var params={"pageCurrent":pageCurrent}
	   params.goodsName=$("#searchNameId").val().trim();
	   var id = $("#selectId option:checked").prop("id");
	   if(id){
		   params.categoryId=id;
	   }
	   $.getJSON(url,params,function(result){
		   console.log(result);
		   // 2.2
		   doHandleResponseResult(result);
	   });
   }
   // 2.2 处理返回的数据
   function doHandleResponseResult(result){
	   if(result.status==1){
		  // 2.3 
		  doSetTableBodyRows(result.data.records);
		  doSetPagination(result.data);
		}else{
		  // 2.5
		  doSetErrorMsg(result.message);
	   }
   }
   // 2.3 根据数据写表格
   function doSetTableBodyRows(data){
	  var tBody=$("#tbodyId");
	  tBody.empty();
	  for(var i in data){
		  var tr=$("<tr></tr>");
		  tr.data("rowData",data[i]);
		  // 2.4
		  var tds=doCreateTds(data[i]);
		  tr.append(tds);
		  tBody.append(tr);
	  }
   }
   // 2.4 写具体行列
   function doCreateTds(row){
	   var tds="<td><input type='checkbox' value='"+row.id+"' class='cBox'></td>"+
			"<td>"+row.goodsName+"</td>"+
			"<td>"+row.categoryName+"</td>"+
			"<td>"+row.goodsPrice+"</td>"+
			"<td>"+(row.goodsStatus==0?"下架":"上架")+"</td>"+
			"<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
			"<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
			"<td><button type='button' class='btn btn-default btn-valid'>"+(row.goodsStatus==0?"上架":"下架")+"</button></td>"+
			"<td><button type='button' class='btn btn-default btn-update'>修改</button></td>"; 
		return tds;
	}
	// 2.5 处理返回的错误数据
	function doSetErrorMsg(msg) {
		var tBody = $("#tbodyId");
		tBody.empty();
		var tr = $("<tr></tr>");
		var td = $("<td></td>");
		td.prop("colspan", 8);
		td.html(msg);
		tr.append(td);
		tBody.append(tr);
		// 2.6 
		doInitPageination();
	}
	// 2.6 初始化page位置内容
	function doInitPageination() {
		$(".rowCount").html("总记录数(0)");
		$(".pageCount").html("总页数(0)");
		$(".pageCurrent").html("当前页(1)");
	}

	// 3.1 类目下拉选框变化处理方法
	function doChangeGoodsType() {
		$("#pageId").data("pageCurrent", 1);
		doGetObjects();
	}

	// 4.1 处理查询按钮事件
	function doQueryObjects() {
		$("#pageId").data("pageCurrent", 1);
		doGetObjects();
	}
	// 4.2 处理删除按钮事件
	function doDeleteObjects() {
		// 4.3
		var ids = doGetCheckedIds();
		if (ids.length == 0) {
			alert("至少选一个");
			return;
		}
		if (!confirm("确认删除吗?"))
			return;
		var params = {
			"ids" : ids.toString()
		};
		var url = "goods/doDeleteObjects";
		$.post(url, params, function(result) {
			if (result.status == 1) {
				alert(result.message);
				/* doGetObjects(); */
				// 4.4
				doRefreshPageAfterDeleteOk();
			} else {
				alert(result.message)
			}
		});
	}
	// 4.3 获取选中的商品的id 
	function doGetCheckedIds() {
		var array = [];
		$("#tbodyId input[type='checkbox']").each(function() {// 迭代这些元素,每发现一个元素都会执行如下回调函数 
			if ($(this).prop("checked")) {
				array.push($(this).val());
			}
		});
		return array;
	}
	// 4.4 删除完成后刷新页面
	function doRefreshPageAfterDeleteOk() {
		var pageCurrent = $("#pageId").data("pageCurrent");
		var pageCount = $("#pageId").data("pageCount");
		var flag = $("#checkAll").prop("checked");
		if (pageCurrent == pageCount && pageCurrent > 1 && flag) {
			pageCurrent--;
			$("#pageId").data("pageCurrent", pageCurrent);
		}
		doGetObjects();
	}
	// 4.5 类目管理和商品添加按钮实现 
	function doLoadEditUI() {
		if ($(this).hasClass("btn-manager")) {
			title = "类目管理";
			// 4.6
			doLoadPage(title);
		} else if ($(this).hasClass("btn-add")) {
			title = "商品添加";
			// 4.7
			GoToInsertPage(title);
		}
	}
	// 4.6 跳转带类目管理页面
	function doLoadPage(title) {
		var url = "category_list"
		$("#mainContentId").load(url, function() {
			$(".box-title").html(title);
		})
	}
	// 4.7跳转到添加商品页面
	function GoToInsertPage(title) {
		var url = "goods_insert";
		$("#mainContentId").load(url, function() {
			$(".box-title").html(title);
		})
	}

	// 5.1 上架和下架操作 
	function doValidById() {
		var rowData = $(this).parents("tr").data("rowData");
		var id = rowData.id;
		var newgoodsStatus = rowData.goodsStatus ? 0 : 1;
		var params = {
			"id" : rowData.id,
			"goodsStatus" : newgoodsStatus
		};
		var url = "goods/doValidById";
		var btn = $(this);
		$.post(url, params, function(result) {
			if (result.status == 1) {
				alert(result.message);
				doGetObjects();
			} else {
				alert(result.message);
			}
		})
	}

	// 6 设置tbody中checkbox的状态
	function doChangeTbodyCheckBoxState() {
		var flag = $(this).prop("checked");
		$("#tbodyId input[type='checkbox']").prop("checked", flag);
	}

	// 7 修改thead对象中checkbox对象的状态 
	function doChangeTHeadCheckBoxState() {
		var flag = true;
		$("#tbodyId input[type='checkbox']").each(function() {
			flag = flag & $(this).prop("checked");
		});
		$("#checkAll").prop("checked", flag);
	}

	// 8.跳转到修改页面
	 function doLoadUpdateUI() {
		//1.判定点击的对象
		var title = "修改商品信息";
		//console.log($(this).parents("tr").data("rowData"));
		var rowData = $(this).parents("tr").data("rowData");
		var params = {
			"id" : rowData.id,
			"goodsName":rowData.goodsName,
			"categoryId":rowData.categoryId,
			"categoryName":rowData.categoryName,
			"goodsPrice":rowData.goodsPrice,
			"goodsStatus":rowData.goodsStatus
		};
		var url = "goods_update";
		 $("#mainContentId").data("params",params);
		//console.log("ss:",$("#mainContentId").data("params"));
		$("#mainContentId").load(url, function() {
			$(".box-title").html(title);
			
		})
	} 

</script>




